<template>


    <layoutContent curPageName="overview123456789">
        <template #left>
            <treeNode :defTreeValue="defVal" @node-change="nodeChange"></treeNode>
        </template>
        <template #content>
            <MerakXTable ref="tableRef" v-bind="tablePayload" :query-columns="handleQueryColumns"
                :query-data="handleQueryData">

            </MerakXTable>
        </template>
    </layoutContent>


</template>
 
<script setup lang="ts">
    import layoutContent from "@/components/LayoutComponents/index.vue";
    import treeNode from '@/views/personalManagement/a-components/oragnizationTree/index.vue';
    import { ref, reactive, toRefs, onMounted, computed } from 'vue';

    import MerakXTable, { MerakXTableInstance, MerakXTableColumn, MerakXTableQuery } from "@/components/MerakXTable";
    import { Path, getTableColumns, getTableData } from "@/api/modules/table";
    import useLoading from "@/hooks/useLoading";
    // 使用队列 loading 管理初始化页面加载状态
    const { queueLoading, queueId } = useLoading();

    import { successMsg, warnMsg, failMsg } from "@/utils/messageUtils";
    import { getOrgsMapListHeadApi, getOrgsMapListApi } from "@/api/modules/personalManagementApi/organization";
    import { getLocationParams } from "@/utils/index";
    const tableRef = ref < MerakXTableInstance > ();

    // orgsOver
    const authList = reactive({});//权限对象
    //接收url参数
    let defVal = ref(0);
    let defLevel = ref(0);
    const newUrl = new URL(window.location.href);
    let url_org_id = getLocationParams(newUrl.href, 'org_id'),
        org_level = getLocationParams(newUrl.href, 'level');
    defVal.value = url_org_id ? Number(url_org_id) : 0;
    defLevel.value = org_level ? Number(org_level) : 0;

    //#region 列表 

    // 页面配置数据
    const state = reactive < {
        org_id: string,
        level: Number,
        parentId: string
    } > ({
        org_id: defVal.value,
        level: defLevel.value
    });


    // 树结构选择
    const nodeChange = (data: any) => {
        console.log(data, "树节点值，，，，")
        let { org_id, level } = data;

        // 构建新的URL
        const newUrl = new URL(window.location.href);
        newUrl.searchParams.set('org_id', org_id);
        newUrl.searchParams.set('level', level);

        defVal.value = org_id;
        defLevel.value = level;
        // 使用pushState更新浏览器历史记录
        window.history.pushState({}, '', newUrl.toString());
        state.org_id = org_id;
        state.level = level;
    }


    // 动态计算表格的外部筛选数据
    const params = computed(() => ({ org_id: state.org_id, level: state.level }));
    // const toolbar=reactive(['export','setting'])

    // 表格配置属性
    const tablePayload = reactive < MerakXTableProps > ({
        // 列设置存储的数据对照值
        columnsByStore: [],
        // 表格行数据的唯一 key, 跟后端同步
        rowKey: "org_id",
        // 初始化的外部筛选数据
        params,
        //导出
        enabledExport: false,
        // toolbar:toolbar
        // // 展示选中列及操作列, 可通过传入对象形式扩展特殊列的渲染插槽, 例如
        // columnType: [{ type: 'handle', width: 180, slot: 'handler' }],
        // // columnType: ['selection',"multiple", "handle"],
        // // 批量操作选项
        // batches: [{ type: "delete", text: "批量删除", color: "red" }],
        // 操作列选项
        // handles: [{ type: "delete", text: "删除", color: "red" }]
    });

    //获取数据 
    //列表内容展示区
    const handleQueryData: MerakXTableInstance["queryData"] = async ({ page, sorts, filters, from }) => {
        const params: Record<string, any> = {};
        if (!!page) {
            Object.assign(params, { ...page }, from);
        }
        return await getOrgsMapListApi(params).then(res => {
            tablePayload.enabledExport = !!res?.auth_list?.exportExcel?.show;
            if (res.code == ResultEnum.SUCCESS) {
                let data = res.data;
                const { table_data, language } = data as { table_data: Record<string, any>; language: Record<string, any> };

                return table_data;
            }
        })

    };


    // 获取表头数据
    const handleQueryColumns: MerakXTableInstance["queryColumns"] = async () => {
        // 初始化接口需要传入队列 loading 暴露的 id
        return getOrgsMapListHeadApi().then(({ code, data }) => {
            if (code == ResultEnum.SUCCESS) {
                // 克隆表头数据作为列设置的对照数据
                tablePayload.columnsByStore = JSON.parse(JSON.stringify(data.columns));
                return {
                    ...data
                };
            }
        });
    };
    //#endregion


</script>

<style lang="scss">
    @import "./index.scss";
</style>